import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';

import {
  Button,
  DatePicker,
  Form,
  Input,
  Modal,
  Radio,
  Tag,
  Select,
  InputNumber,
  message,
  Row,
  Col,
} from 'antd';
import { modalLayoutLg, modalLayoutSm } from '@/config/layout';
import { request } from 'umi';
import BlockConf from './blockPz'
import TypeConf from './typePz'
const DictModal = (props: any, refs: any) => {
  const [form] = Form.useForm();
  const { setFieldsValue, resetFields } = form;
  const [code, setCode] = useState('');
  const [isModalVisible, setIsModalVisible] = useState(false);
  const { TextArea } = Input;
  const [typeOption, settypeOption] = useState({});
  const [blockConf, setblockConf] = useState({});
  const sourceTypeValue = Form.useWatch('sourceType', form);
  const blockTypeValue = Form.useWatch('blockType', form);
  const [isinit, setisinit] = useState(false);
  //显示弹窗
  const showModal = () => {
    setIsModalVisible(true);
  };

  //取消
  const handleCancel = () => {
    setIsModalVisible(false);
    setCode('');
    resetFields();
    setisinit(false);
    settypeOption({})
    setblockConf({});
    props.callback && props.callback();
  };
  //确定
  const handleOk = () => {
    form
      .validateFields()
      .then((vals) => {
        let Obj = form.getFieldsValue();
        Obj = {
          ...Obj,
          ...{
            bussType: props.bussType,
            typeOption: JSON.stringify(typeOption),
            blockConf: JSON.stringify(blockConf),
            showType: Obj.showType.join(','),
          }
        };

        const url = code ? '/sys/block/' : '/sys/block/';
        const method = code ? 'PUT' : 'POST';
        if (code) {
          Obj.blockId = code;
        } else {
        }
        request(url, {
          method: method,
          headers: {
            'Content-Type': 'application/json',
          },
          data: Obj,
        }).then((res) => {
          message.success(res?.meta?.msg);
          setIsModalVisible(false);
          handleCancel();
        });
      })
      .catch((info) => { });
  };

  const getDetail = (id: any) => {
    request('/sys/block/' + id, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        id,
      },
    }).then((res) => {
      setFieldsValue({
        ...res?.data,
        ...{
          showType: res?.data?.showType.split(','),
        }
      });

      showModal();
      settypeOption(JSON.parse(res?.data?.typeOption || '{}'));
      setTimeout(() => {
        setisinit(true);

        setblockConf(JSON.parse(res?.data?.blockConf || '{}'));
      }, 500);
    });
  };
  useImperativeHandle(refs, () => ({
    init: (id: any, record: any) => {
      if (id) {
        setCode(id);
        getDetail(id);
      } else {
        resetFields();
        setisinit(true);
        setFieldsValue({
          sourceType: 'APP',
          blockType: '1'
        });
        showModal();
      }

      // setfileList([]);
    },
  }));
  useEffect(() => {
    settypeOption({});
    setblockConf({});
  }, [blockTypeValue, sourceTypeValue]);
  return (
    <Modal
      title={code === '' ? '新增' : '编辑'}
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
      centered
      width={1200}
      maskClosable={false}
      bodyStyle={{
        maxHeight: window.innerHeight - 150,
        overflowY: 'auto',
      }}
    >
      <Form form={form} layout="vertical" {...modalLayoutSm}>
        <Form.Item
          label="组件名称"
          name="blockName"
          rules={[{ required: true, message: '请输入组件名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="组件适用设备端"
          name="sourceType"
          rules={[{ required: true, message: '请选择设备端!' }]}
        >
          <Select>
            <Option value='WEB'>WEB</Option>
            <Option value='APP'>APP</Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="类型"
          name="blockType"
          rules={[{ required: true, message: '请选择组件类型!' }]}
        >
          <Select>
            <Option value='1'>卡片</Option>
            <Option value='2'>图表</Option>
            <Option value='3'>进度</Option>
            <Option value='4'>带周期图表</Option>
          </Select>
        </Form.Item>
        <Form.Item label="类型配置">
          <TypeConf conf={typeOption} settypeOption={settypeOption} blockTypeValue={blockTypeValue} sourceTypeValue={sourceTypeValue} />
        </Form.Item>
        <Form.Item label="组件配置">
          <BlockConf blockConf={blockConf} isinit={isinit} setblockConf={setblockConf} typeOption={typeOption} />
        </Form.Item>
        <Form.Item name="showType" label="组件显示类型">
          <Select mode='multiple'>
            <Option value='1'>首页显示</Option>
            <Option value='2'>首页展开显示</Option>
            <Option value='3'>详情页显示</Option>
            <Option value='4'>详情页日</Option>
            <Option value='5'>详情页月</Option>
            <Option value='6'>详情页年</Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="排序"
          name="sno"
        >
          <Input />
        </Form.Item>
        <Form.Item label="描述" name="remark">
          <TextArea rows={4} />
        </Form.Item>

      </Form>
    </Modal>
  );
};
const AddMCom = forwardRef(DictModal);
export default AddMCom;
